<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="query.search" placeholder="请输入关键字搜索" clearable @clear="getOrderList"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="getOrderList"></el-button>
        </el-col>
      </el-row>
      <el-table :data="orderlist" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="order_number" label="订单编号"></el-table-column>
        <el-table-column prop="order_price" label="订单价格"></el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status ==='1'" type="success">已付款</el-tag>
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="是否发货">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_send ==='是'" type="success">已发货</el-tag>
            <el-tag type="danger" v-else>未发货</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="下单时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDialogOpen(scope.row)"></el-button>
            <el-button type="success" @click="logisticsDialogVisible = true" icon="el-icon-location" size="mini"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background>
    </el-pagination>
    </el-card>

    <!-- 修改地址 -->
    <el-dialog
    title="修改地址"
    :visible.sync="editAddrDialogVisible"
    width="50%"
    @close="editAddrDialogClosed">
    <el-form :model="editAddrForm" ref="editAddrRef">
      <el-form-item label="选择城市" label-width="100px">
        <el-cascader
        v-model="selectedAddr"
        :options="citylist"
        :props="{ expandTrigger: 'hover' , value: 'text' , label: 'text', children:'children' }"></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" label-width="100px">
        <el-input v-model="editAddrForm.consignee_addr"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editAddrDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editAddr">确 定</el-button>
    </span>
  </el-dialog>

  <!-- 物流状态 -->
  <el-dialog
  title="物流状态"
  :visible.sync="logisticsDialogVisible"
  width="50%">
  <div class="block">
    <div class="radio">
      <el-radio-group v-model="reverse">
        <el-radio :label="true">倒序</el-radio>
        <el-radio :label="false">正序</el-radio>
      </el-radio-group>
    </div>
    <el-timeline :reverse="reverse">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.timestamp">
        {{activity.content}}
      </el-timeline-item>
    </el-timeline>
  </div>
  </el-dialog>
  </div>
</template>

<script>
import citydata from '../../city/citydata'
export default {
  data(){
    return{
      // 展示数据传递的参数
      query:{
        page: 1,
        pagesize: 2,
        search: ''
      },
      // 订单列表
      orderlist: [],
      // 数据总长度
      total: 0,
      // 修改地址对话框关闭事件
      editAddrDialogVisible: false,
      // 城市联动列表
      citylist:[],
      // 修改地址表单
      editAddrForm:{
        _id: '',
        consignee_addr: ''
      },
      // 级联选择器选中项
      selectedAddr: [],
      // 物流状态对话框
      logisticsDialogVisible: false,
      // 物流状态排序方向
      reverse: true,
      // 物流状态数据
      activities: [{
        content: '华北保定南环公司-李四(13343333333)-派送中',
        timestamp: '2022-04-17 17:52:12'
      },{
        content: '已到达-华北保定南环公司',
        timestamp: '2022-04-17 15:22:16'
      },{
        content: '华北保定转运中心-已发往-华北保定公司',
        timestamp: '2022-04-17 09:52:27'
      },{
        content: '已到达-华北保定转运中心',
        timestamp: '2022-04-16 17:52:19'
      },{
        content: '华北直客部十四部-已发往-华北保定转运中心',
        timestamp: '2022-04-15 19:52:45'
      },{
        content: '华北直客部-张三-已收件',
        timestamp: '2022-04-15 15:52:17'
      },{
        content: '华北石门转运中心-已发往-华北直客部',
        timestamp: '2022-04-15 12:52:17'
      },{
        content: '已到达-华北石门转运中心',
        timestamp: '2022-04-15 07:52:17'
      },{
        content: '商家已发货，正在通知申通快递取件',
        timestamp: '2022-04-14 09:52:17'
      },{
        content: '您的订单已打包完成',
        timestamp: '2022-04-13 17:52:17'
      }, {
        content: '订单确认，已通知上架配货',
        timestamp: '2022-04-13 15:52:16'
      }, {
        content: '您已提交订单，请等待系统确认',
        timestamp: '2022-04-11 15:44:22'
      }]
    }
  },
  created(){
    this.getOrderList()
  },
  methods:{
    // 获取每个用户对应的订单列表
    async getOrderList(){
      let userid = window.sessionStorage.getItem('userid')
      let {data} = await this.$http.get('goods/order/' + userid, {params:this.query})
      if(data.status !== 200) return this.$message.error('获取订单失败！')
      this.orderlist = data.data
      this.total = data.total
      this.citylist = citydata
    },
    // 每页显示多少条发生改变时触发
    handleSizeChange(newSize){
      this.query.pagesize = newSize
      this.query.page = 1
      this.getOrderList()
    },
    // 页码发生改变时触发
    handleCurrentChange(newPage){
      this.query.page = newPage
      this.getOrderList()
    },
    // 修改地址关闭事件
    editAddrDialogClosed(){
      this.editAddrForm.detailedAddr = ''
      this.selectedAddr = []
    },
    editDialogOpen(row){
      this.editAddrForm._id = row._id
      this.editAddrForm.consignee_addr = row.consignee_addr
      this.editAddrDialogVisible = true
    },
    // 修改地址
    async editAddr(){
      let consignee_addr = this.selectedAddr.join() + ' ' + this.editAddrForm.consignee_addr
      console.log(consignee_addr);
      let {data} = await this.$http.patch('/goods/order/'+this.editAddrForm._id, {consignee_addr})
      if (data.status !== 201){
        this.$message.error('地址修改失败！')
        this.editAddrDialogVisible = false
      }else{
        this.$message.success('地址修改成功！')
        this.getOrderList()
        this.editAddrDialogVisible = false
      }
    }
  }
}
</script>

<style scoped>
  .radio{
    padding-bottom: 20px;
  }
</style>